<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圣杯布局</title>
		<style type="text/css">
			*{
				margin:0;
				padding: 0;
			}
			body{
				width:700px;
				margin:300px auto;
				border:1px solid #0000FF;
			}
			footer,header{
				width:100%;
				background-color: #90EE90;
			}
			.content, .left, .right{
				float:left;
			}
			.content{
				width:100%;
				background-color: red;
			}
			.left{
				margin-left:-100%;
				position: relative;
				left:-100px;
			}
			.right{
				margin-left:-100px;
				position: relative;
				right:-100px;
			}
			.left{
				width:100px;
				background-color: blue;
			}
			.right{
				width:100px;
				background-color: pink; 
			}
			.clear-fix{
				padding:0 100px;
			}
			.clear-fix:after{
				content:'';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<header>头部</header>
		<div class="clear-fix">
			<div class="content">content</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<footer>底部</footer>
	</body>
</html>
